<template>
  <z-form-item class="z-form-item" style="margin-left: 120px">
    <z-button
      v-for="(item, index) in formForm.btnArrList"
      :key="index"
      :type="item.type"
      style="margin-right: 20px"
      :ghost="item.invertColor == '1' && (item.btnType === '1' || item.btnType === '5')"
      @click="btnEvent(item)"
    >
      {{ item.btnText ? item.btnText : "按钮" }}
    </z-button>
  </z-form-item>
</template>
<script>
import { defineComponent, toRef } from 'vue'

export default defineComponent({
  name: 'ButtonItem',
  props: {
    formProperty: {
      type: Object,
      default: undefined
    },
    basicProperty: {
      type: Object,
      default: undefined
    }
  },
  setup(props, _ref) {
    const basicForm = toRef(props, 'basicProperty')
    const formForm = toRef(props, 'formProperty')

    // 按钮点击事件绑定
    const btnEvent = (item) => {
      if (item.btnType === '4') {
        _ref.emit('resetForm')
        return
      } else if (item.btnType === '5') {
        _ref.emit('validate')
        return
      } else {
        // eslint-disable-next-line no-eval
        eval(item.event)
        return
      }
    }

    return {
      basicForm,
      formForm,
      btnEvent
    }
  }
})
</script>
<style lang="less" scoped>
.z-form-item{
  flex: 1;
}
</style>
